<template>
	<view class="news-detail-container">
		<!-- 轮播图及视频 -->
		<view class="card-swiper" v-if="newsData.images?.length">
			<wd-swiper
			custom-image-class="custom-image"
			:autoplay="false"
			custom-indicator-class="custom-indicator-class"
			:height="400"
			  :list="newsData.images"
			  stopAutoplayWhenVideoPlay
			  :autoplayVideo="false"
			  indicator-dots 
			></wd-swiper>
		</view>
		<view style="padding: 0 20rpx;">
		<!-- 标题 -->
			
		<view class="news-detail-title">
			{{newsData.title}}
		</view>
		<!-- 副标题 -->
		<view class="news-detail-subTitle">
			{{newsData.subTitle}}
		</view>
		<!-- 发布信息 -->
		<view class="news-detail-release-info">
			<text class="news-release-user">
				{{newsData.userName}}
			</text>
			<text class="news-release-time">
				{{newsData.createTime}}
			</text>
		</view>
		<!-- 富文本 -->
		<view class="news-detail-content" >
			<mp-html :content="contentImage" />
		</view>
		</view>
		<wd-gap safe-area-bottom height="20"></wd-gap>
	</view>
</template>

<script setup>
	import {
		ref,reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import{
		getDataDetail
	} from "../../utils/commonMethods"
	const newsData=ref({})
	// 图文富文本
	const contentImage=ref([])
	/**
	 * 处理富文本，替换宽高
	*/
	function extractSrcContent(str) {
	  const regex = /\s*style\s*=['"][^'"]*['"]/gi;
	  const richText = str;
	  const convertedText = richText ? richText.replace(/<img\s*([^>]*)>/gi, (match, attrs) => {
	    // 移除原有style属性,将原有style属性取出处理
		const matchs=attrs.match(regex)||[]
		const style=matchs[0]?.split('"')||[]
		const Allstyle=style[1]?.replace(/\s*width\s*:\s*[^;]+;?/gi,'width:100%;')
		let latestStyle=Allstyle?.replace(/\s*height\s*:\s*[^;]+;?/gi,'height:auto;')
		if(!latestStyle) latestStyle="width:100%;height:auto"
	    const cleanAttrs = attrs.replace(/\s*style\s*=['"][^'"]*['"]/gi, '');
	    // 添加新style
	    return `<img ${cleanAttrs} mode="widthFix" style="${latestStyle}">`;
	  }) : "";
	  
	contentImage.value= convertedText
	}
	/**
	 * options: id,title:标题
	*/
	onLoad(async(options)=>{
		const data= await getDataDetail(options.id)
		if(options.title) uni.setNavigationBarTitle({
			title:options.title
		})
		let imageList=[]
		if(data.result?.images) imageList=data.result?.images?.map(o=>o.imageUrl)
		newsData.value=data.result||{}
		newsData.value.images=imageList
		newsData.value.content&&extractSrcContent(newsData.value.content)
	})

</script>

<style lang="scss" scoped>
	.card-swiper{
		--wot-swiper-radius: 0;
		--wot-swiper-item-padding: 0 24rpx;
		--wot-swiper-nav-dot-color: #dddddd;
		--wot-swiper-nav-dot-active-color: #1b9c61;
		  :deep(.custom-image) {
		    border-radius: 0;
			// height: 902rpx !important;
			width: 100% !important;
		  }
		  :deep(.custom-indicator-class) {
		      bottom: -16px;
		    }
	}
	.news-detail-container{
		width: 100vw;
		min-height: 100vh;
		padding: 10rpx 20rpx;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		.news-detail-title{
			font-weight: 1000;
			font-size: 29rpx;
			line-height: 50rpx;
			margin-top: 50rpx;
		}
		.news-detail-subTitle{
			font-size: 25rpx;
			line-height: 50rpx;
		}
		.news-detail-release-info{
			color: #777777;
			font-size: 25rpx;
			line-height: 50rpx;
			.news-release-user{
				margin-right: 27rpx;
			}
		}
		.news-detail-content{
			width: 100%;
			overflow: hidden;
			margin-top: 25rpx;
			image{
				width: 100%;
			}
		}
	}

</style>